{% layout = "base.html" %}

{-title-}修改密码{-title-}

{-content-}
<div class="row" id="change_password">
    <div class="col-sm-3">
    </div>
    <div class="col-sm-6">
        <form method="POST" v-on:submit.prevent>
            <div class="form-group">
                <h3>修改密码</h3>
                <br>
            </div>
            <div class="form-group row">
                <label for="inputOldPassword" class="col-sm-4 col-form-label">旧密码</label>
                <div class="col-sm-8">
                    <input v-model="password_old" type="password" class="form-control" id="inputOldPassword" placeholder="旧密码">
                </div>
            </div>
            <div class="form-group row">
                <label for="inputPassword" class="col-sm-4 col-form-label">密码</label>
                <div class="col-sm-8">
                    <input v-model="password" type="password" class="form-control" id="inputPassword" placeholder="新密码">
                </div>
            </div>
            <div class="form-group row">
                <label for="inputPasswordConfirm" class="col-sm-4 col-form-label">确认新密码</label>
                <div class="col-sm-8">
                    <input v-model="password_confirm" type="password" class="form-control" id="inputPasswordConfirm" placeholder="确认密码">
                </div>
            </div>
            <div v-if="error" class="form-group alert alert-danger" role="alert">
                [[ error ]]
            </div>
            <div v-if="info" class="form-group alert alert-info" role="alert">
                [[ info ]]
            </div>
            <div class="form-group row">
                <div class="col-sm-4">
                    <button v-on:click="updatePassword()" class="btn btn-primary">更新密码</button>
                </div>
            </div>
        </form>
    </div>
    <div class="col-sm-3">
    </div>
</div>

<script type="text/javascript">

var profileApp = new Vue({
	delimiters: ['[[', ']]'],
  	el: '#change_password',
  	data: {
        password_old: '',
        password: '',
        password_confirm: '',
        error: '',
        info: '',
    },
	methods: {
        updatePassword(event) {
            this.error = ValidatePasswordChars(this.password);
            if (this.error) {
                return;
            }

            if (!this.password_old) {
                this.error = '请输入旧密码。';
                return;
            }

            if (!this.password || !this.password_confirm) {
                this.error = '请输入密码和新确认密码。';
                return;
            }

            if (this.password != this.password_confirm) {
                this.error = "输入的密码不一致";
                return;
            }

            this.error = '';
            this.info = '';

            var thiz = this;
            axios.post('/user/change-password', {
                password_old: this.password_old,
                password: this.password,
            })
            .then(function (response) {
                thiz.error = response.data.error;
                if (!thiz.error) {
                    thiz.info = '成功密码更改。';
                }
            })
            .catch(function (error) {
                console.log(error);
            });
		},
  	}
});

</script>

{-content-}

